<!--conf
<sample>
              <product version="1.5" edition="std"/>
                     <modifications>
                            <modified date="070101"/>
                     </modifications>
               </sample>
 --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	
<title>Event handlers</title>

</head>

<body>
<link rel='STYLESHEET' type='text/css' href='../common/style.css'>
<table cellspacing="0" cellpadding="0" class="sample_header" border="0">
	<tr valign="middle">
		<!-- COMPONENT ICON -->
		<td width="40" align="center"><img src="../common/dhtmlxtree_icon.gif" border="0"></td>
		<!-- COMPONENT NAME -->
		<td width="150" align="left" nowrap="true">Sample: dhtmlxTree</td>
		<!-- SAMPLE TITLE -->
		<td width="0" align="left" nowrap><b>Event handlers</b></td>
		<!-- LINK TO COMPONENT PAGE -->
		<td width="0" align="right"><a href="http://www.dhtmlx.com/docs/products/dhtmlxTree/index.shtml">dhtmlxTree main page</a></td>
		<!-- CLOSE BUTTON -->
		<td width="50"><div class="sample_close"><a href="javascript:void(0);" onclick="self.close();"><img src="../common/sample_close.gif" width="14" height="14" border="0" alt="X"></a></div></td>
	</tr>
</table>
	
	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
	
	<script  src="../../codebase/dhtmlxcommon.js"></script>
	<script  src="../../codebase/dhtmlxtree.js"></script>
	
	<p>This JavaScript tree example illustrates the ability to assign user-defined functions to different
	 event handlers (e.g. <em>Mouse Over, Mouse Out, Check, UnCheck, Select, Deselect</em>). If you try to change 
	 a checkbox value, an alert box will appear. Alert box is displayed also when a tree node is selected. 
	 Confirm box will pop up if user opens or closes a node.<br>
So, dhtmlxTree allows you to define any functions and attach them to event handlers in order to customize 
tree behavior. That enriches possibilities for user interaction with JavaScript tree interface.</p>
	

	<table>
		<tr>
			<td>
				<div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver; "/>
			</td>
			<td rowspan="2" style="padding-left:25" valign="top">
				<div id="logarea" style="background-color:lightgrey;height:218px;width:400px; padding:3px; overflow:auto;"></div>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
<div class='sample_code'><div class="hl-main"><pre><span class="hl-code"> 
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">treeBox</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">width:200;height:200</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code"><div class="hl-main"><pre><span class="hl-code"> 
    </span><span class="hl-identifier">tree</span><span class="hl-code">=</span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">getElementById</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">treeBox</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">,</span><span class="hl-quotes">&quot;</span><span class="hl-string">100%</span><span class="hl-quotes">&quot;</span><span class="hl-code">,</span><span class="hl-quotes">&quot;</span><span class="hl-string">100%</span><span class="hl-quotes">&quot;</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
    ...
    </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setDragHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">onDrop</span><span class="hl-brackets">)</span><span class="hl-code">;</span><span class="hl-comment">//</span><span class="hl-comment">set function object to call on drop</span><span class="hl-comment"></span><span class="hl-code">
    </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setOnClickHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">onNodeSelect</span><span class="hl-brackets">)</span><span class="hl-code">;</span><span class="hl-comment">//</span><span class="hl-comment">set function object to call on node select</span><span class="hl-comment"></span><span class="hl-code">
    </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setOnOpenHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">aFunc</span><span class="hl-brackets">)</span><span class="hl-code">;</span><span class="hl-comment">//</span><span class="hl-comment">set function to call on open/close node</span><span class="hl-comment"></span><span class="hl-code">
    </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setOnCheckHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">aFunc</span><span class="hl-brackets">)</span><span class="hl-code">;</span><span class="hl-comment">//</span><span class="hl-comment">set function to call on open/close node</span><span class="hl-comment"></span><span class="hl-code">
    </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setOnDblClickHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">aFunc</span><span class="hl-brackets">)</span><span class="hl-code">;</span><span class="hl-comment">//</span><span class="hl-comment">set function to call on dbl click</span><span class="hl-comment"></span></pre></div></span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span></pre></div></div>	
		<li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
		<li>Dropped node ID and new parent node ID  will be passed to function specified as argument for setDragFunction(funcObj)</li>
		<li>node ID will be passed to the function specified as argument for setOpenAction(aFunc)</li>
		<li>node ID will be passed to the function specified as argument for setDblClickAction(aFunc)</li>
	<script>
			function doLog(str){
			
				var log = document.getElementById("logarea");
				log.innerHTML = log.innerHTML+str+"</br>"
				log.scrollTop = log.scrollHeight;
			}
	
			function tonclick(id){
			
				doLog("Item "+tree.getItemText(id)+" was selected");
			
			};
			function tondblclick(id){
			
				doLog("Item "+tree.getItemText(id)+" was doubleclicked");
			
			};			
			function tondrag(id,id2){
			
				return confirm("Do you want to move node "+tree.getItemText(id)+" to item "+tree.getItemText(id2)+"?");
			
			};
			function tonopen(id,mode){
			
				return confirm("Do you want to "+(mode>0?"close":"open")+" node "+tree.getItemText(id)+"?");
			
			};
			function toncheck(id,state){
			
				doLog("Item "+tree.getItemText(id)+" was " +((state)?"checked":"unchecked"));
			
			};
			
			
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
			tree.enableCheckBoxes(1);
			tree.enableDragAndDrop(1);
			tree.setOnOpenHandler(tonopen);
 
   			tree.attachEvent("onOpenEnd",function(nodeId, event){doLog("An id of open item is "+nodeId);});
			tree.setOnClickHandler(tonclick);
			tree.setOnCheckHandler(toncheck);
			tree.setOnDblClickHandler(tondblclick);
			tree.setDragHandler(tondrag);
			
			tree.loadXML("tree3.xml");
			
			
			
			
	</script>

<!-- FOOTER -->
<table callspacing="0" cellpadding="0" border="0" class="sample_footer"><tr><td style="padding-left: 8px;">&copy; <a href="http://www.dhtmlx.com">DHTMLX LTD</a>. All rights reserved</td></tr></table>
<!-- FOOTER -->

</body>
</html>
